<template>
  <div class="exchange_history_content">
    <div class="content_box">
      <div class="content_table mb20">
        <div class="table_title mb10">
          <span class="title_text">退货单</span>（费用合计：
          <span class="title_price">¥{{ refundInfo.refundBudgetTotlalMoney }}</span> -
          <span class="title_price">{{ refundInfo.refundBudgetTotlalCNMoney }}</span>
          ，管理费：¥{{ refundInfo.refundManagerFee }}+其他费用：¥{{ refundInfo.refundOtherFee }}）
        </div>
        <el-table border :data="refundInfo.itemList" style="width: 100%" header-cell-class-name="table_head">
          <el-table-column prop="mainPicUrl" label="图片" fixed="left" width="120">
            <template #default="{ row }">
              <span class="change_tag">
                <img v-if="row.barterType === 1" class="tag_image" src="@/assets/images/refund.png" />
                <img v-if="row.barterType === 2" class="tag_image" src="@/assets/images/exchange.png" />
              </span>
              <img v-if="row.mainPicUrl" class="row_img" :src="row.mainPicUrl" />
              <div v-else-if="row.type === 2" class="row_img" style="background: #f3f6f9">
                <el-icon size="80" color="#E1E6ED"><UserFilled /></el-icon>
              </div>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="240" show-overflow-tooltip />
          <el-table-column prop="brandName" label="品牌" width="120" />
          <el-table-column prop="modeCode" label="型号" width="90" />
          <el-table-column prop="unit" label="单位" width="90">
            <template #default="{ row }">
              {{ useCodeArrStore().getDictName("shop_unit", row.unit) || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="num" label="退换数量" width="110" />
          <el-table-column v-if="refundInfo.isShowLost" prop="lostRate" label="耗损率" width="90" />
          <el-table-column prop="productUnitPrice" label="材料单价" width="130" />
          <el-table-column prop="workerUnitPrice" label="人工费单价" width="130" />
          <el-table-column prop="unitTotalMoney" label="单项合计" width="130" />
          <el-table-column prop="projectVal" label="预算工程量" width="130" />
          <el-table-column prop="projectTotalMoney" label="汇总合计" width="130" />
          <el-table-column prop="exchangeCause" label="变更原因" min-width="180" />
          <el-table-column prop="exchangeAmount" label="变更金额" min-width="180" />
        </el-table>
      </div>
      <div class="content_table">
        <div class="table_title mb10">
          <span class="title_text">退换单</span>（费用合计：
          <span class="title_price">¥{{ changeInfo.budgetTotlalMoney }}</span> -
          <span class="title_price">{{ changeInfo.budgetTotlalCNMoney }}</span>
          ，管理费：¥{{ changeInfo.managerFee }}+其他费用：¥{{ changeInfo.otherFee }}）
          <span class="title_discount">
            正价商品：{{ changeInfo.regularDiscount }}% / 特价商品：{{ changeInfo.specialDiscount }}%
          </span>
        </div>
        <div class="table_box mb10">
          <div>
            成交金额：<span style="color: #3d3d3d">¥{{ changeInfo.concludeMoney }}</span>
          </div>
          <div style="font-size: 12px; color: #86909c">备注：{{ changeInfo.concludeRemark }}</div>
        </div>
        <el-table border :data="changeInfo.itemList" style="width: 100%" header-cell-class-name="table_head">
          <el-table-column prop="mainPicUrl" label="图片" fixed="left" width="120">
            <template #default="{ row }">
              <span class="change_tag">
                <img v-if="row.replenishType === 1" class="tag_image" src="@/assets/images/exchange.png" />
                <img v-if="row.replenishType === 2" class="tag_image" src="@/assets/images/supply.png" />
              </span>
              <img v-if="row.mainPicUrl" class="row_img" :src="row.mainPicUrl" />
              <div v-else-if="row.type === 2" class="row_img" style="background: #f3f6f9">
                <el-icon size="80" color="#E1E6ED"><UserFilled /></el-icon>
              </div>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="240" show-overflow-tooltip />
          <el-table-column prop="brandName" label="品牌" width="120" />
          <el-table-column prop="modeCode" label="型号" width="90" />
          <el-table-column prop="unit" label="单位" width="90">
            <template #default="{ row }">
              {{ useCodeArrStore().getDictName("shop_unit", row.unit) || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="num" label="换补数量" width="110" />
          <el-table-column v-if="refundInfo.isShowLost" prop="lostRate" label="耗损率" width="90" />
          <el-table-column prop="productUnitPrice" label="材料单价" width="130" />
          <el-table-column prop="workerUnitPrice" label="人工费单价" width="130" />
          <el-table-column prop="unitTotalMoney" label="单项合计" width="130" />
          <el-table-column prop="projectVal" label="预算工程量" width="130" />
          <el-table-column prop="projectTotalMoney" label="汇总合计" width="130" />
          <el-table-column prop="exchangeCause" label="变更原因" min-width="180" />
          <el-table-column prop="exchangeAmount" label="变更金额" min-width="180" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getHistoryExchangeOrder } from "@/apis/quote-price/following";
import useCodeArrStore from "@/store/modules/select";

const route = useRoute();
const exchangeBudgetId = route.query.exchangeBudgetId;
const refundInfo = ref({});
const changeInfo = ref({});

const loadingFlag = ref(false);

const getExchangeOrderHistory = async () => {
  loadingFlag.value = true;
  const { data } = await getHistoryExchangeOrder(exchangeBudgetId);
  refundInfo.value = data.returnOrder;
  changeInfo.value = data.replacementOrder;
  loadingFlag.value = false;
};

(() => {
  getExchangeOrderHistory();
})();
</script>

<style lang="scss">
.exchange_history_content {
  width: 100%;
  height: calc(100% - 50px);
  margin-top: 50px;
  box-sizing: border-box;
  padding: 20px 15px 15px 20px;
  overflow: hidden;
  .content_box {
    box-sizing: border-box;
    height: 100%;
    padding: 20px;
    overflow: auto;
    border-radius: 10px;
    background: white;
    .content_table {
      .table_title {
        color: #4e5969;
        .title_text {
          color: #3d3d3d;
          font-size: 18px;
          line-height: 24px;
          font-weight: 700;
        }
        .title_price {
          color: #ff3333;
        }
        .title_discount {
          color: #4e5969;
          font-size: 12px;
        }
      }
      .table_box {
        display: grid;
        gap: 20px;
        background: #f6f8fa;
        padding: 15px 20px;
      }
      .row_img {
        display: block;
        width: 80px;
        height: 80px;
        margin: 0 auto;
        border-radius: 4px;
      }
      .change_tag {
        float: left;
        position: absolute;
        top: 0;
        left: 0;
        .tag_image {
          position: absolute;
        }
      }
    }
  }
}
</style>
